<template>
  <div
    class="dashboard-editor-container"
    style="display: flex; justify-content: space-around; flex-wrap: wrap"
  >
    <el-card
      style="margin-top: 22px; height: 650px; width: 50%; margin-right: 20px"
    >
      <h3 style="font-weight: bold; margin-bottom: 10px">
        <i class="el-icon-burger"></i> 轮播图
      </h3>
      <el-carousel indicator-position="outside" height="500px">
        <el-carousel-item v-for="item in srcList" :key="item">
          <el-image
            style="width: 100%; height: 100%"
            :src="item"
            :fit="fit"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-card>
    <el-card
      style="margin-top: 22px; height: 650px; width: 40%; margin-left: 20px"
    >
      <el-card
        style="height: 350px"
        body-style="20px
      "
      >
        <h3 style="font-weight: bold; margin-bottom: 10px">
          <i class="el-icon-s-data"></i> 设备统计
        </h3>
        <div
          style="display: flex; justify-content: space-around; flex-wrap: wrap"
        >
          <el-card class="cardTj"> 1 </el-card>
          <el-card class="cardTj"> 1 </el-card>
          <el-card class="cardTj"> 1 </el-card>
          <el-card class="cardTj"> 1 </el-card>
          <el-card class="cardTj"> 1 </el-card>
          <el-card class="cardTj"> 1 </el-card>
        </div>
      </el-card>
      <el-card style="margin-top: 22px; height: 250px; width: 100%">
        <h3 style="font-weight: bold; margin-bottom: 10px">
          <i class="el-icon-s-order"></i> 信息栏
        </h3>
        <div
          style="
            cursor: pointer;
            display: table;
            width: 100%;
            line-height: 36px;
          "
          @click="openDetail(item.noticeId)"
          v-for="item in noticeList"
          :key="item.noticeId"
        >
          <div style="display: table-cell; padding-right: 10px">
            <el-tag
              size="mini"
              effect="dark"
              type="warning"
              v-if="item.noticeType == 2"
              >公告</el-tag
            >
            <el-tag size="mini" effect="dark" v-else>通知</el-tag>
            {{ item.noticeTitle }}
          </div>
          <div style="display: table-cell; width: 90px; font-size: 14px">
            <i class="el-icon-time"></i>
            {{ parseTime(item.createTime, "{y}-{m}-{d}") }}
          </div>
        </div>
      </el-card>
    </el-card>

    <!--通知公告详情 -->
    <el-dialog
      :title="notice.noticeTitle"
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <div style="margin-top: -20px; margin-bottom: 10px">
        <el-tag
          size="mini"
          effect="dark"
          type="warning"
          v-if="notice.noticeType == 2"
          >公告</el-tag
        >
        <el-tag size="mini" effect="dark" v-else>通知</el-tag>
        <span style="margin-left: 20px">{{ notice.createTime }}</span>
      </div>
      <div v-loading="loading" class="content">
        <div v-html="notice.noticeContent"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDetail"> 关 闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listNotice,
  getNotice,
  delNotice,
  addNotice,
  updateNotice,
} from "@/api/system/notice";
export default {
  name: "Index",
  data() {
    return {
      value: new Date(),
      // 遮罩层
      loading: true,
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        // "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
        "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
      ],
      // 是否显示弹出层
      open: false,
      // 信息列表
      noticeList: [],
      // 信息详情
      notice: {},
      // 是否为管理员
      isAdmin: false,
      // 设备列表
      deviceList: [],
      // 设备统计信息
      deviceStatistic: {},
      // 设备总数
      deviceCount: 0,
      // emqx状态数据
      stats: {},
      // emqx统计信息
      static: {},
      // 版本号
      version: "3.8.0",
    };
  },
  methods: {
    /** 查询公告列表 */
    getNoticeList() {
      let queryParams = {
        pageNum: 1,
        pageSize: 6,
      };
      listNotice(queryParams).then((response) => {
        this.noticeList = response.rows.splice(0, 6);
      });
    },
    // 取消按钮
    closeDetail() {
      this.title = "";
      this.open = false;
    },
    // 打开信息详情
    openDetail(id) {
      this.open = true;
      this.loading = true;
      getNotice(id).then((response) => {
        this.notice = response.data;
        this.open = true;
        this.loading = false;
      });
    },
  },
  created() {
    this.getNoticeList();
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 60px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cardTj {
  width: 40%;
  height: 68px;
  margin-top: 20px;
}
.icon-blue {
  color: #36a3f7;
}
.card-icon {
  float: left;
  font-size: 30px;
}
</style>
